import ProCard from '@ant-design/pro-card';
import OpinionTable from '@/components/OpinionTable';
import { useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { useState } from 'react';
import CompanyDetail from './components/CompanyDetail';
import RiskGraph from '../../components/RiskGraph';
import { DatePicker, Space, Button, Select, Drawer, Spin } from 'antd';
import { getListedCompany, getNewsList, getCompanyStockInfo } from '@/services/zhirong/financialPublicOpinion';
import { InputNumber, Input, message } from 'antd';
import { getListedCompanyRiskIndexPrediction } from '@/services/zhirong/financialPublicOpinion';
import parser from './parser.js';
// import { defaultList } from './defaultData';
import moment from 'moment';
import { nanoid } from 'nanoid';
import { request } from 'umi';

// import { KeepAlive } from 'umi-plugin-keep-alive'

const { Option } = Select;

const { Search } = Input;

const convertDate = (d) => {
  const arr = [];
  d.toLocaleDateString()
    .split('/')
    .forEach((e) => {
      if (e.length === 1) {
        arr.push(`0${e}`);
      } else {
        arr.push(e);
      }
    });
  return arr.join('-');
};

const FinancialPublicOpinion = () => {
  const defaultData = [{
    "title": "首届深圳国际智慧养老产业博览会明日启幕 展出超千种智慧养老产品和技术",
    "abstract": "首届深圳国际智慧养老产业博览会（下称“深圳智慧养老展”）将于9月15日至17日在深圳会展中心（福田）3-4号馆举办。本届展会以“智慧科技聚鹏城，老有颐养圳幸福”为主题，来自全球约200家企业将展出超过1000种智慧养老产品和技术，20余项最前沿的老龄科技产品路演首发，旨在打造国际性的智慧养老产品技术展示与产业合作平台。 　　首届展会由深圳市人民政府指导、深圳市民政局组织、市委市政府有关部门支持，深业集团有限公司主办，深圳市幸福健康产业（集团）有限公司、深圳会展中心管理有限责任公司承办。 　　本届展会展览面积约15000平方米，设立智慧养老招商引资专区、智慧养老产品展区、智慧养老服务展区、智慧养老科普展区四大展区，汇聚约200家各类机构，其中以腾讯、比亚迪、优必选、创维为代表的大批深圳科技企业成为主要参展单位；重点打造“全场景智慧养老体验区”专区，该专区包括智慧养老科普教育、医养结合、适老化改造、智慧养老场景样板间等内容，全面呈现智慧科技如何赋能新时代的养老生活，让观众现场了解最新的智慧养老产品和技术，体验最新智慧养老科技产品。 　　本届展会精心策划“1+N”论坛。论坛聚焦“科技赋能养老”主题，通过对智慧养老的探索、观点的分享、智慧的碰撞，凝聚各方力量，构建产业交流与合作的重要平台，邀请多位政府部门领导、两院院士、专家学者、领军企业家等带来权威解读和前沿观点，并发布联合政、企、学、研多方共同编制的《2023中国智慧科技养老产业深调研报告》，描述现状、发现问题、寻求路径，凝聚多方智慧力量探索科技赋能养老的新模式，为智慧养老产业高质量发展建言献策。 　　本次展会将举办多场投融资路演会活动，近50家投资机构到场，深圳幸福健康集团将发挥“桥梁”作用，为参展企业与投资机构“牵线”，培育孵化龙头企业，带动民营养老托育服务企业机构共同发展，打造“不落幕”的展会。 （文章来源：深圳商报）",
    "keywords": [
      "科技",
      "产业",
      "深圳",
      "展会",
      "企业"
    ],
    "source": "深圳商报",
    "date": "2023-09-14",
    "news_type": '中性',
    "news_risk_index": 0.584759
  },

  {
    "title": "【评论】不能为了活跃市场而伤害市场 转融通证券出借业务也需适当限制",
    "abstract": "近段时间，证监会发布新的减持规范性要求，让外界看到了监管部门对市场信心的呵护。不过，相比于二级市场的直接减持，在巨大的套现利益的驱使下，其他变相减持、违规减持、拐弯减持等现象浮上台面。转融通证券出借交易作为一项活跃证券交易市场的业务，越来越多的被上市公司大股东关注，成为了其曲线套现获利的工具。 　　据不完全统计，当前有融捷股份(002192.SZ)、比亚迪(002594.SZ)、飞龙股份(002536.SZ)、恒誉环保(688309.SH)、清新环境(002573.SZ)等公司的大股东参与转融通证券出借业务。在特定时间段内，才刚刚上市不久的公司也出现了巨额融券余额。证金公司9月13日披露的转融通业务月度统计表显示，截止2023年8月，当前的转融通交易金额为2909.58亿元，其中的转融券余额高达1427.41亿元，上述信息足以印证转融通证券出借业务已成为了市场不可忽视的因素。 　　交易部门推出该项业务初衷是为了增加资金与证券供给，进一步完善融资融券业务机制，发挥融资融券市场功能，除此之外，还能完善股价形成机制，增强股票交易的公平性，增强证券市场的流动性和连续性。从市场博弈的角度来说，将会为投资者提供新的盈利模式，增强其规避投资风险的能力。不过，从现实的场景来看，融券基本成为了大机构专属权利，甚至部分还直接异化成了部分股东锁定利益的工具。 　　上交所曾发布的《关于科创板战略投资者参与证券出借业务有关事项的通知》中称，科创板战略投资者及其关联方在承诺期内不能融券卖出科创板上市公司股票，但可以将其获配股票出借给证券公司，仅供该证券公司开展融资融券业务。以某刚上市不久的公司为例，在注册制背景下，公司发行定价较高。限售股东眼馋当前的高股价，因此选择通过转融通规则进行证券出借，而借券方为某资管产品或者私募产品。限售股东可以选择购买该资管产品或私募产品，如果股票上涨，则手里持有的市值也会上涨，如果股票下跌，则可以享受到资管产品或私募产品的做空收益。由此，虽然限售股东直接交易受限，但是仍然可以通过转融通规则锁定价格，从而实现利益最大化。从公平性角度来说，转融通证券出借业务完全没有起到促进公平性的作用，在特定背景下，甚至异化成为了收割中小散户的工具。二级市场数据显示，部分股票刚上市不久，就出现了数亿元的融券余额，而上述券的源头正是限售股东。 　　回过头来看，整个转融通证券出借业务确实能活跃资本市场，但是并未促进市场公平，也并未给投资者提供新的盈利模式，而是给限售股东提供了另类的套现机会。　　从合规性角度来说，融通证券出借业务显然有违规减持的嫌疑。证券法及相关部门规章明确规定了限售股东在限定的期限内不得转让，那么将股票出借给其他机构在二级市场减持算不算减持？个人认为，只要股票实实在在卖出去了都应当算作减持。以笔者接触的某化工企业为例，其在披露某年的三季报时，控股股东持股数量突然少了15万股，而再此期间并未披露减持公告。后来该公司解释称，控股股东持股数量减少系参与转融通证券出借业务所致，股票出借后，相关金融机构计算错误，未能足额买回还券，导致了控股股东持股数量减少。那么，既然控股股东的股票被卖出，数量也减少了，上述控股股东算不算违规减持？显然，转融通证券出借业务成了上述控股股东限售的突破口。 　　个人认为转融通证券出借业务本身就是特定股东的减持行为，不能因为出借给他人减持就不算作是减持。从公平性角度来说，既然对限售股东做了限售要求，就应当要求其实打实的履行限售承诺，不能明里一套、暗里一套。从目前的市场演变来看，部分股东的转融通证券出借行为已经实实在在伤害了市场，因此应当予以适当限制。（文章来源：界面新闻）",
    "keywords": [
      "业务",
      "股东",
      "融通",
      "证券",
      "市场"
    ],
    "source": "界面新闻",
    "date": "2023-09-14",
    "news_type": '中性',
    "news_risk_index": 0.584759
  }
  ];
  const [date, setDate] = useState('2022-02-16');
  const [company, setCompany] = useState('');
  const [companyName, setCompanyName] = useState();

  const [day, setDay] = useState(5);
  const [newsList, setNewsList] = useState([]);
  // graph用于drawer
  const [graph, setGraph] = useState();
  const [prediction, setPrediction] = useState({
    date: '2022-02-16',
    value: '0',
    riskIndex: 'car',
  });
  const [companyList, setCompanyList] = useState([]);
  const [search, setSearch] = useState({});
  const [defaultName, setDefaultName] = useState([{ name: '欧菲光' }, { name: '科大讯飞' }]);

  const getDate = () => {
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
    const day = currentDate.getDate().toString().padStart(2, '0');

    const endDate = `${year}${month}${day}`;
    // console.log(endDate);

    // 获取当前日期的时间戳
    const timestamp = currentDate.getTime();

    // 计算七天前的时间戳
    const sevenDaysAgoTimestamp = timestamp - 1 * 24 * 60 * 60 * 1000;

    // 创建一个新的Date对象，表示七天前的日期
    const sevenDaysAgoDate = new Date(sevenDaysAgoTimestamp);

    // 获取七天前的年、月、日
    const y = sevenDaysAgoDate.getFullYear();
    const m = (sevenDaysAgoDate.getMonth() + 1).toString().padStart(2, '0');
    const d = sevenDaysAgoDate.getDate().toString().padStart(2, '0');

    // 格式化日期
    const startDate = `${y}${m}${d}`;
    return { startDate, endDate };
  };

  const { run: getStock } = useRequest(getCompanyStockInfo, {
    manual: true,
    onSuccess: (res) => {
      if (res && res.resultcode === '200') {

        setSearch(res.result[0])
        // setNewsList(result.data.newsList);
      }
    },
  });

  const getAllInfo = (fullName) => {
    console.log('fullname', fullName)
    console.log('fullname.length', fullName.length)

    request('/api/pom/news/latest', {
      method: 'GET',
      params: {
        // end_date: endDate,
        // start_date: startDate,
        company_name: fullName,
      },
    }).then((res) => {
      const list = res.data.result_list;
      setNewsList(res.data.result_list);

      if (list.length === 0) {
        message.error('未找到相关数据！');

      }

      if (res.code === 200)
        getStock({
          gid: res.data?.gid || 'sz300528',
          key: 'b5c43366976d5bc1226c6c9988916925'
        });

    });
  }



  useEffect(() => {
    //const { startDate, endDate } = getDate();
    const fullName = sessionStorage.getItem('comName')
    if (fullName?.length > 0) {
      setCompany(fullName)
      getAllInfo(fullName)
    }

  }, []);

  const { run: getList, loading: loadingList } = useRequest(getNewsList, {
    manual: true,
    onSuccess: (result) => {
      if (result && result.code === 0) {
        // setNewsList(result.data.newsList);
      }
    },
  });




  const { run: getGraph, loading: loadingGraph } = useRequest(getListedCompanyRiskIndexPrediction, {
    manual: true,
    onSuccess: (res) => {
      console.log('companyList Data>>>>', res.data);
      setGraph(parser(res.data.predictionList[0].graph, search.company));
      setPrediction({
        date: res.data.predictionList[0].date,
        value: res.data.predictionList[0].value,
        riskIndex: 'car',
      });
    },
    onError: (error) => {
      console.log('加载数据失败', error);
    },
  });

  // /api/pom/ListedCompany 获取沪深两市所有的上市公司简要信息列表

  const { run: getCompanyList, loading: loadingCompanies } = useRequest(getListedCompany, {
    manual: true,
    onSuccess: (result) => {
      console.log('company', result);
      if (result && result.code === 0) {
        setCompanyList(result.data.listedCompanyList);
      }
    },
    onError: (err) => {
      console.log('companyError!', err);
    },
  });

  const handleDateChange = (e) => {
    const { _d: d } = e;
    setDate(convertDate(d));
  };
  const handleDayChange = (e) => {
    setDay(e);
  };
  const handleChange = (value) => {
    setCompany(value);
  };
  const handleSearch = (name) => {
    sessionStorage.setItem('comName', '')
    setCompany('')
    if (name === '')
      return
    getAllInfo(name)
    //setSearch({ date, day, company, companyList, isSearch: true });
  };

  // useEffect(() => {
  //   setSearch({ date, day, company, companyList, isSearch: true });
  // }, []);

  // useEffect(() => {
  //   getCompanyList({
  //     pageNum: 1,
  //     pageSize: 3000,
  //   });
  // }, []);
  // useEffect(() => {



  //   // console.log('>>>>>我是新闻list', newsList);

  // }, [search]);
  const [visible, setVisible] = useState(false);
  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  return (
    <ProCard ghost direction="column">
      <ProCard
        layout="center"
        style={{
          borderRadius: '8px',
          marginBottom: '1em',
          height: '160px',

        }}
        title={<b style={{ fontSize: '18px' }}>风险发现</b>}
        headStyle={{ fontWeight: 'bold' }}
      >
        <Space style={{
          display: 'flex',
          alignItems: 'flex-start',
          flexDirection: 'column',
        }}>
          <Search
            allowClear
            // showSearch
            // disabled={loadingCompanies}
            placeholder={company ? company : '请输入企业完整名称或者简称'}
            // optionFilterProp="children"
            //notFoundContent={loadingCompanies ? <Spin size="small" tip="搜索中" /> : null}
            //filterOption={(input, option) => option.children.indexOf(input.toLowerCase()) >= 0}
            // onChange={handleChange}
            style={{ width: 300 }}
            value={companyName}
            onSearch={handleSearch}
            enterButton="搜索"

          />
          <Space style={{ color: '#999999', marginTop: '10px' }} >
            搜索建议:
            {defaultName?.map((defaultName) => (
              <Button
                key={nanoid()}
                onClick={() => {
                  handleSearch(defaultName.name);
                  setCompany(defaultName.name);

                }}
                style={{ backgroundColor: '#F7F7F7', color: '#999999' }}
              >
                {defaultName.name}
              </Button>
            ))}
          </Space>
          {/* {companyList.map((c) => (
              <Option value={c.stockCode} key={nanoid()}>
                {c.companyName}
              </Option>
            ))} */}
          {/* <DatePicker
            onChange={handleDateChange}
            defaultPickerValue={moment('2022-02-16', 'YYYY-MM-DD')}
          ></DatePicker>
          <span>时间窗口大小</span>
          <InputNumber
            min={0}
            max={20}
            step={1}
            precision={0}
            onChange={handleDayChange}
            defaultValue="5"
          ></InputNumber>
          <span style={{ marginRight: '0.5em' }}>天</span> */}
        </Space>
        {/* <Button type="primary" >
          搜索
        </Button> */}
      </ProCard>

      <ProCard direction="row" gutter={16} ghost>
        <ProCard
          loading={loadingCompanies}
          colSpan={15}
          style={{ borderRadius: '8px', height: '65rem' }}
        >
          <CompanyDetail data={search} showDrawer={showDrawer} prediction={prediction} />
        </ProCard>

        <ProCard
          loading={loadingList}
          bodyStyle={{ padding: '20px', borderRadius: '8px', overflow: 'auto' }}
          style={{ borderRadius: '8px', height: '65rem' }}
        >
          <OpinionTable newsList={newsList} />
        </ProCard>
      </ProCard>
      <Drawer width="750px" visible={visible} title="关联企业" placement="right" onClose={onClose}>
        <RiskGraph data={graph} loading={loadingGraph} layout={{ type: 'dagre' }}></RiskGraph>
      </Drawer>
    </ProCard>
  );
};

export default FinancialPublicOpinion;
